<template>
  <view class="container">
    <block v-if="isload">
      <form @submit="formSubmit" @reset="formReset" report-submit="true">
        <view class="form-content">
          <view class="form-item">
            <text class="label">退款商品</text>
          </view>
          <view class="product">
            <view v-for="(item, index) in prolist" :key="index" class="content">
              <view
                @tap="goto"
                :data-url="'/pages/shop/product?id=' + item.proid"
              >
                <image :src="item.pic"></image>
              </view>
              <view class="detail">
                <text class="t1">{{ item.name }}</text>
                <text class="t2">{{ item.ggname }}</text>
                <view class="t3"
                  ><text class="x1 flex1"
                    >剩余可退款金额: ￥{{ item.real_totalprice }}
                  </text>
                  <!-- <text class="x2">×{{ item.num }}</text> -->
                  <view class="num-wrap" v-if="item.isrefund != 0">
                    <view class="text-desc norefund">该商品不允许退款</view>
                  </view>
                  <!-- <view class="num-wrap" v-if="item.isrefund == 0">
										<view class="addnum">
											<view class="minus" @tap="gwcminus" :data-index="index" :data-ogid="item.id"
												:data-num="refundNum[index].num">
												<image class="img" src="/static/img/cart-minus.png" />
											</view>
											<input class="input" type="number" :value="refundNum[index].num"
												@blur="gwcinput" :data-index="index" :data-ogid="item.id"
												:data-max="item.num - item.refund_num"
												:data-num="refundNum[index].num"></input>
											<view class="plus" @tap="gwcplus" :data-index="index" :data-ogid="item.id"
												:data-max="item.num - item.refund_num" :data-num="refundNum[index].num">
												<image class="img" src="/static/img/cart-plus.png" />
											</view>
										</view>
										<view class="text-desc">申请数量：最多可申请{{ item.canRefundNum }}件</view>
									</view>
									<view class="num-wrap" v-else>
										<view class="text-desc norefund">该商品不允许退款</view>
									</view> -->
                </view>
                <text class="t2"
                  >￥{{ item.sell_price }} × {{ refundNum[index].num }}</text
                >
              </view>
              <checkbox-group
                v-if="item.isrefund == 0"
                @change="checkboxChange"
                :data-index="index"
                class="custom-checkbox"
              >
                <checkbox
                  color="t('color1')"
                  :value="index.toString()"
                  :disabled="item.isrefund != 0"
                  :checked="item.checked"
                  style="border-radius: 50%"
                />
              </checkbox-group>
            </view>
          </view>
        </view>
        <view class="form-content">
          <view
            class="form-item"
            v-if="opt.type == 'refund'"
            style="display: none"
          >
            <text class="label">货物状态</text>
            <view class="input-item">
              <picker
                @change="pickerChange"
                :value="cindex"
                :range="cateArr"
                name="receive"
                style="
                  height: 80rpx;
                  line-height: 80rpx;
                  border-bottom: 1px solid #eeeeee;
                "
              >
                <view class="picker">{{
                  cindex == -1 ? "请选择" : cateArr[cindex]
                }}</view>
              </picker>
            </view>
          </view>
          <view class="form-item">
            <text class="label">退款原因</text>
            <view class="input-item">
              <textarea
                placeholder="请输入退款原因"
                placeholder-style="color:#999;"
                name="reason"
                @input="reasonInput"
              ></textarea>
            </view>
          </view>
          <view class="form-item">
            <text class="label">退款金额(元)</text>
            <!-- type="digit" -->
            <view class="flex"
              ><input
                name="money"
                type="digit"
                :value="money"
                @input="moneyInput"
                placeholder="请输入退款金额"
                placeholder-style="color:#999;"
                :disabled="type == 'return'"
            /></view>
          </view>
          <view class="form-item flex-col">
            <view class="label">上传图片(最多三张)</view>
            <view
              id="content_picpreview"
              class="flex"
              style="flex-wrap: wrap; padding-top: 20rpx"
            >
              <view
                v-for="(item, index) in content_pic"
                :key="index"
                class="layui-imgbox"
              >
                <view
                  class="layui-imgbox-close"
                  @tap="removeimg"
                  :data-index="index"
                  data-field="content_pic"
                >
                  <image src="/static/img/ico-del.png"></image>
                </view>
                <view class="layui-imgbox-img">
                  <image
                    :src="item"
                    @tap="previewImage"
                    :data-url="item"
                    mode="widthFix"
                  ></image>
                </view>
              </view>
              <view
                class="uploadbtn"
                :style="
                  'background:url(' +
                  static_url +
                  '/static/img/shaitu_icon.png) no-repeat 60rpx;background-size:80rpx 80rpx;background-color:#F3F3F3;'
                "
                @tap="uploadimg"
                data-field="content_pic"
                v-if="content_pic.length < 3"
              ></view>
            </view>
          </view>
        </view>
        <button
          class="btn"
          @tap="formSubmit"
          :disabled="submitDisabled"
          :style="{ background: t('color1') }"
        >
          确定
        </button>
        <view style="padding-top: 30rpx"></view>
      </form>
    </block>
    <loading v-if="loading"></loading>
    <dp-tabbar :opt="opt"></dp-tabbar>
    <popmsg ref="popmsg"></popmsg>
  </view>
</template>

<script>
var app = getApp();

export default {
  data() {
    return {
      opt: {},
      loading: false,
      isload: false,
      menuindex: -1,
      static_url: app.globalData.static_url,
      pre_url: app.globalData.pre_url,
      orderid: "",
      totalprice: 0,
      order: {},
      detail: {},
      refundNum: [],
      prolist: [],
      content_pic: [],
      cindex: -1,
      cateArr: ["未收到货", "已收到货"],
      type: "",
      money: "",
      reason: "",
      tmplids: [],
      isloading: 0,
      totalcanrefundnum: 0,
      submitDisabled: false,
      checkedItems: [],
    };
  },

  onLoad: function (opt) {
    this.opt = app.getopts(opt);
    this.orderid = this.opt.orderid;
    this.static_url = app.globalData.static_url;
    this.type = this.opt.type;
    // if (this.type == 'return') {
    // 	uni.setNavigationBarTitle({
    // 		title: '申请退货退款'
    // 	});
    // }
    this.getdata();
  },
  onPullDownRefresh: function () {
    this.getdata();
  },
  methods: {
    checkboxChange(e) {
      const index = e.currentTarget.dataset.index;
      var money = Number(this.money);
      if (this.prolist[index].checked) {
        if (money >= Number(this.prolist[index].real_totalprice)) {
          money -= Number(this.prolist[index].real_totalprice);
        }
      } else {
        money += Number(this.prolist[index].real_totalprice);
      }
      this.money = money.toFixed(2);
      this.prolist[index].checked = !this.prolist[index].checked;
      this.checkedItems = this.prolist
        .filter((item) => item.checked)
        .map((item) => ({ ogid: item.id, num: item.canRefundNum }));
      //this.calculate();
    },
    getdata: function () {
      var that = this;
      that.loading = true;
      app.post("Order/refundinit", { id: that.orderid }, function (res) {
        that.loading = false;
        if (res.status == 0) {
          app.alert(res.msg, function () {
            app.goback();
            retrun;
          });
        }
        that.tmplids = res.tmplids;
        that.detail = res.detail;
        that.totalprice = that.detail.returnTotalprice;
        // that.money = that.totalprice.toFixed(2);
        var temp = [];
        that.prolist = res.prolist;
        that.prolist.forEach((item) => {
          item.checked = false;
        });
        that.order = res.order;
        var totalcanrefundnum = 0;
        for (var i in that.prolist) {
          temp.push({
            ogid: that.prolist[i].id,
            num: that.prolist[i].canRefundNum,
          });
          totalcanrefundnum += that.prolist[i].canRefundNum;
        }
        that.totalcanrefundnum = totalcanrefundnum;
        console.log(temp);
        that.refundNum = temp;
        that.loaded();
      });
    },
    pickerChange: function (e) {
      this.cindex = e.detail.value;
    },
    formSubmit: function () {
      if (this.money <= 0 || this.money > parseFloat(this.totalprice)) {
        app.error("最大退款金额:" + this.totalprice);
        // this.$nextTick(() => {
        //   this.money = this.totalprice + "";
        //   this.$forceUpdate();
        // });
        return;
      }

      var that = this;
      if (that.isloading) return;

      // 验证逻辑保持不变
      var orderid = that.orderid;
      var reason = that.reason;
      var receive = that.cindex;
      var money = parseFloat(that.money);
      // var refundNum = that.refundNum;
      var refundNum = that.checkedItems;
      var content_pic = that.content_pic;
      var refundtotal = 0;

      console.log(that.checkedItems);

      for (var i in refundNum) {
        refundtotal += refundNum[i].num;
      }
      if (refundtotal <= 0) {
        app.alert("请选择要退款的商品");
        return;
      }
      if (reason == "") {
        app.alert("请填写退款原因");
        return;
      }
      if (money < 0 || money > parseFloat(that.totalprice)) {
        app.alert("退款金额有误");
        return;
      }

      that.isloading = 1;
      app.showLoading("提交中");

      // 先请求订阅消息授权
      that.getRefundTmplIds(function () {
        // 订阅消息处理完成后，再提交退款申请
        app.post(
          "Order/refund",
          {
            orderid: orderid,
            reason: reason,
            money: money,
            content_pic: content_pic,
            receive: receive,
            refundNum: refundNum,
            type: that.type,
          },
          function (res) {
            app.showLoading(false);
            app.alert(res.msg);

            if (res.status == 1) {
              setTimeout(function () {
                app.goto("detail?id=" + that.orderid, "reLaunch");
              }, 1000);
            } else {
              that.isloading = 0;
            }
          }
        );
      });
    },

    // 获取退款相关的订阅消息模板
    getRefundTmplIds: function (callback) {
      var that = this;

      // #ifdef MP-WEIXIN
      app.get(
        "Wxtmpl/getTmplIds",
        {
          type: 7,
        },
        function (res) {
          var tmplIds = res.res;
          if (res.res) {
            wx.requestSubscribeMessage({
              tmplIds: tmplIds,
              complete(res) {
                // 无论用户是否同意订阅，都继续提交退款申请
                // 如果需要用户必须同意才能继续，可以在这里添加判断
                if (typeof callback === "function") {
                  callback();
                }
              },
            });
          } else {
            // 获取模板ID失败也继续流程
            if (typeof callback === "function") {
              callback();
            }
          }
        }
      );
      // #endif

      // #ifdef H5
      // H5直接继续流程
      if (typeof callback === "function") {
        callback();
      }
      // #endif
    },
    //加
    gwcplus: function (e) {
      var index = parseInt(e.currentTarget.dataset.index);
      var maxnum = parseInt(e.currentTarget.dataset.max);
      var ogid = e.currentTarget.dataset.ogid;
      var num = parseInt(e.currentTarget.dataset.num);
      if (num >= maxnum) {
        return;
      }
      var refundNum = this.refundNum;
      refundNum[index].num++;
      this.refundNum = refundNum;
      this.calculate();
    },

    //减
    gwcminus: function (e) {
      var index = parseInt(e.currentTarget.dataset.index);
      var maxnum = parseInt(e.currentTarget.dataset.max);
      var ogid = e.currentTarget.dataset.ogid;
      var num = parseInt(e.currentTarget.dataset.num);
      if (num == 0) return;
      var refundNum = this.refundNum;
      refundNum[index].num--;
      this.refundNum = refundNum;
      this.calculate();
    },
    //输入
    gwcinput: function (e) {
      var index = parseInt(e.currentTarget.dataset.index);
      var maxnum = parseInt(e.currentTarget.dataset.max);
      var ogid = e.currentTarget.dataset.ogid;
      var num = parseInt(e.currentTarget.dataset.num);
      var newnum = parseInt(e.detail.value);
      console.log(num + "--" + newnum);
      if (num == newnum) return;

      if (newnum > maxnum) {
        app.error("请输入正确数量");
        return;
      }
      var refundNum = this.refundNum;
      refundNum[index].num = newnum;
      this.refundNum = refundNum;
      this.calculate();
    },
    calculate: function () {
      var that = this;
      var total = 0;
      var refundTotalNum = 0;
      for (var i in that.refundNum) {
        if (that.refundNum[i].num == that.prolist[i].num)
          total += parseFloat(that.prolist[i].real_totalprice);
        else {
          total +=
            (that.refundNum[i].num *
              parseFloat(that.prolist[i].real_totalprice)) /
            that.prolist[i].num;
        }
        refundTotalNum += that.refundNum[i].num;
      }
      if (
        refundTotalNum == that.detail.totalNum ||
        refundTotalNum == that.detail.canRefundNum
      ) {
        total = that.detail.returnTotalprice;
      }
      console.log(total);
      total = parseFloat(total);
      if (total > that.detail.returnTotalprice)
        total = that.detail.returnTotalprice;
      total = total.toFixed(2);
      that.totalprice = total;
      that.money = total;
    },
    moneyInput: function (e) {
      //  const inputValue = e.detail.value; // 获取输入框的值
      //   // 正则表达式：校验是否为有效的数字格式且不超过两位小数
      //   const regex = /^\d+(\.\d{1,2})?$/;

      //   if (!regex.test(inputValue)) {
      //     // 如果输入内容不符合要求，清空输入框或显示错误提示
      // 	app.error('请输入有效的数字格式（不超过两位小数）');
      //     this.$nextTick(() => {
      //         this.money = this.totalprice + '';
      //     	this.$forceUpdate(); // 强制触发视图渲染
      //       });
      //     return;
      //   }

      var newmoney = parseFloat(e.detail.value);

      if (newmoney <= 0 || newmoney > parseFloat(this.totalprice)) {
        app.error("最大退款金额:" + this.totalprice);
        // this.$nextTick(() => {
        //     this.money = this.totalprice + '';
        //  this.$forceUpdate(); // 强制触发视图渲染
        //   });
        //console.log(this.money,newmoney)
        //return;
      }
      //   console.log("sure", this.money, newmoney);
      this.money = newmoney;
    },
    reasonInput: function (e) {
      this.reason = e.detail.value;
    },
    uploadimg: function (e) {
      var that = this;
      var field = e.currentTarget.dataset.field;
      var pics = that[field];
      if (!pics) pics = [];
      app.chooseImage(function (urls) {
        for (var i = 0; i < urls.length; i++) {
          pics.push(urls[i]);
        }
      }, 1);
    },
    removeimg: function (e) {
      var that = this;
      var index = e.currentTarget.dataset.index;
      var field = e.currentTarget.dataset.field;
      var pics = that[field];
      pics.splice(index, 1);
    },
  },
};
</script>
<style>
.num-wrap {
  position: absolute;
  right: 0;
  /* bottom: 24rpx; */
}

.num-wrap .text-desc {
  margin-bottom: -60rpx;
  color: #999;
  font-size: 24rpx;
  text-align: right;
}

.addnum {
  position: absolute;
  right: 0;
  bottom: 0rpx;
  font-size: 30rpx;
  color: #666;
  width: auto;
  display: flex;
  align-items: center;
}

.addnum .plus {
  width: 48rpx;
  height: 36rpx;
  background: #f6f8f7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.addnum .minus {
  width: 48rpx;
  height: 36rpx;
  background: #f6f8f7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product .addnum .img {
  width: 24rpx;
  height: 24rpx;
}

.addnum .i {
  padding: 0 20rpx;
  color: #2b2b2b;
  font-weight: bold;
  font-size: 24rpx;
}

.addnum .input {
  flex: 1;
  width: 70rpx;
  border: 0;
  text-align: center;
  color: #2b2b2b;
  font-size: 24rpx;
}

.form-item4 {
  width: 100%;
  background: #fff;
  padding: 20rpx 20rpx;
  margin-top: 1px;
}

.form-item4 .label {
  width: 150rpx;
}

.layui-imgbox {
  margin-right: 16rpx;
  margin-bottom: 10rpx;
  font-size: 24rpx;
  position: relative;
}

.layui-imgbox-close {
  position: absolute;
  display: block;
  width: 32rpx;
  height: 32rpx;
  right: -16rpx;
  top: -16rpx;
  color: #999;
  font-size: 32rpx;
  background: #fff;
}

.layui-imgbox-close image {
  width: 100%;
  height: 100%;
}

.layui-imgbox-img {
  display: block;
  width: 200rpx;
  height: 200rpx;
  padding: 2px;
  border: #d3d3d3 1px solid;
  background-color: #f6f6f6;
  overflow: hidden;
}

.layui-imgbox-img > image {
  max-width: 100%;
}

.layui-imgbox-repeat {
  position: absolute;
  display: block;
  width: 32rpx;
  height: 32rpx;
  line-height: 28rpx;
  right: 2px;
  bottom: 2px;
  color: #999;
  font-size: 30rpx;
  background: #fff;
}

.uploadbtn {
  position: relative;
  height: 200rpx;
  width: 200rpx;
}

.product {
  width: 94%;
  margin: 0 3%;
  border-radius: 8rpx;
  /* margin-top: 16rpx; */
  padding: 14rpx 3%;
  background: #fff;
}

.product .content {
  display: flex;
  position: relative;
  width: 100%;
  padding: 16rpx 0px;
  border-bottom: 1px #e5e5e5 dashed;
  border-top: 1px #e5e5e5 dashed;
  /* height: 230rpx; */
  align-items: center;
}

.product .content checkbox-group {
  /* margin-right: 20rpx; */
}

.product .content checkbox {
  transform: scale(0.8);
}

.product .content:last-child {
  border-bottom: 0;
}

.product .content image {
  width: 140rpx;
  height: 140rpx;
}

.product .content .detail {
  display: flex;
  flex-direction: column;
  margin-left: 14rpx;
  flex: 1;
}

.product .content .detail .t1 {
  font-size: 26rpx;
  line-height: 36rpx;
  height: 72rpx;
  margin-bottom: 10rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.product .content .detail .t2 {
  height: 46rpx;
  line-height: 46rpx;
  color: #999;
  overflow: hidden;
  font-size: 26rpx;
  margin-bottom: 6rpx;
}

.product .content .detail .t3 {
  display: flex;
  height: 40rpx;
  line-height: 40rpx;
  color: #ff4246;
  position: relative;
}

.product .content .detail .x1 {
  flex: 1;
  font-size: 28rpx;
}

.product .content .detail .x2 {
  width: 100rpx;
  font-size: 32rpx;
  text-align: right;
  margin-right: 8rpx;
}

.product .content .comment {
  position: absolute;
  top: 64rpx;
  right: 10rpx;
  border: 1px #ffc702 solid;
  border-radius: 10rpx;
  background: #fff;
  color: #ffc702;
  padding: 0 10rpx;
  height: 46rpx;
  line-height: 46rpx;
}

.product .content .comment2 {
  position: absolute;
  top: 64rpx;
  right: 10rpx;
  border: 1px #ffc7c2 solid;
  border-radius: 10rpx;
  background: #fff;
  color: #ffc7c2;
  padding: 0 10rpx;
  height: 46rpx;
  line-height: 46rpx;
}

.form-content {
  width: 94%;
  margin: 16rpx 3%;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}

.form-item {
  width: 100%;
  padding: 32rpx 20rpx;
}

.form-item .label {
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
}

.form-item .input-item {
  width: 100%;
}

.form-item textarea {
  width: 100%;
  height: 200rpx;
  border: 1px #eee solid;
  padding: 20rpx;
}

.form-item input {
  width: 100%;
  border: 1px #f5f5f5 solid;
  padding: 10rpx;
  height: 80rpx;
}

.form-item .mid {
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 20rpx;
}

.btn {
  height: 100rpx;
  line-height: 100rpx;
  width: 90%;
  margin: 0 auto;
  border-radius: 50rpx;
  margin-top: 50rpx;
  color: #fff;
  font-size: 30rpx;
  font-weight: bold;
}

.norefund {
  margin-bottom: 0rpx !important;
  color: #eb544d !important;
}
</style>
